
tbody.addEventListener('click', function (e) {
  // 获取事件源
  const target = e.target
  // classList获取的是拆开之后的class列表，是一个类数组对象，转成数组方便操作
  const classes = Array.from(target.classList)
  // 从当前按钮出发找tr
  const tr = target.parentNode.parentNode
  if (classes.includes('btn-edit')) {
    
    // classList有一个add方法，可以在原来的基础之上去添加class，原来的class不受影响
    // classList也有一个remove方法，移除一个class
    tr.classList.add('edit')
    // 找到这一行的所有span
    const spans = tr.querySelectorAll('span')
    spans.forEach(span => {
      // span的下一个兄弟元素（input）的value就等于当前span的innerHTML
      span.nextElementSibling.value = span.innerHTML
    })
  } else if (classes.includes('btn-ok')) {
    // 确定
    // 把修改之后的数据发送后端，成功以后再修改前端
    // 获取tr上的自定义属性id
    const id = tr.getAttribute('data-id')
    const name = tr.querySelector('.inputName').value
    const price = tr.querySelector('.inputPrice').value
    const num = tr.querySelector('.inputNum').value
    utils.fetch('./api/shop/update.php', { id, name, price, num }).then(resp => {
      if (resp.code === 200) {
        //更新成功
        tr.classList.remove('edit')
        // 把input里面的value给对应span的innerHTML
        const spans = tr.querySelectorAll('span')
        spans.forEach(span => {
          // span的下一个兄弟元素（input）的value就等于当前span的innerHTML
          span.innerHTML = span.nextElementSibling.value
        })
      }
    })
    // TODO: 取消，直接回复默认状态即可
    // TODO：删除，后端在数据库里删除，前端重新getData()
  }
})
